<template>
  <el-container>
    <el-header class="header">
      <div class="d-flex justify-content-evenly">
        <div class="p-2">
          <i class="el-icon-umbrella"></i>
        </div>
        <div class="p-2">登录 注册</div>
      </div>

      <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <div class="d-flex justify-content-evenly">
          <div class="p-2">
            <el-submenu index="1">
              <template slot="title">logo选项</template>
              <el-submenu index="2-1">
                <template slot="title">油纸伞介绍</template>
                <el-menu-item index="2-1-1">油纸伞产品分类</el-menu-item>
                <el-menu-item index="2-1-2">彩绘类</el-menu-item>
                <el-menu-item index="2-1-3">手绘类</el-menu-item>
              </el-submenu>
              <el-submenu index="2-2">
                <template slot="title">油纸伞介绍</template>
                <el-menu-item index="2-2-1">认识油纸伞</el-menu-item>
                <el-menu-item index="2-2-2">工艺特色</el-menu-item>
                <el-menu-item index="2-2-3">文化内涵</el-menu-item>
              </el-submenu>
            </el-submenu>
          </div>
          <div class="p-3">
            <div class="search">
              <!-- <el-input placeholder="请输入内容" v-model="input4" id="keywords">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input> -->
              <input type="text" class="userInput" id="keywords" @keyup="inp">
              <el-button type="primary" icon="el-icon-search" round>搜索</el-button>
            </div>
            <div id="datadiv" class="showDataDiv">
              <!-- <p v-for=" (item,index) in searchData" :key="item" >
                {{ item }}
                {{ index }}
              </p> -->
              <p v-for="item in searchData" :key="item.sa">
                {{ item.q }}
              </p>
            </div>

          </div>
          <div class="icon p-2">
            <ul>
              <li><i class="el-icon-edit"></i></li>
              <li><i class="el-icon-video-camera-solid"></i></li>
              <li><i class="el-icon-view"></i></li>
              <li><i class="el-icon-loading"></i></li>
            </ul>
          </div>
        </div>
      </el-menu>
    </el-header>
    <el-main>
      <!-- 轮播图 -->
      <div style="width: 500px">
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="(item, index) in specImages" :key="index">
            <img :src="item" style="width: 100%; height: 100%;" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-main>

    <el-footer>
      <!-- 测试跨域
      <div class="search">
        <input type="text" class="userInput" id="keywords" />
        <div id="datadiv"></div>
      </div> -->


    </el-footer>
  </el-container>
</template>

<script>
import jsonp from 'jsonp';

export default {
  // name: "Carousel",
  data() {

    return {
      activeIndex: "1",
      activeIndex2: "1",
      responseData: null,
      searchData: '',
      // specImages: ["/img/th1.png"
      //     , "/img/th2.png"
      //     ,"/img/th3.png"
      //     ,"/img/th4.png"
      //     ,"/img/th5.png"
      //     ,"/img/th6.png"
      //     ,"/img/th7.png"
      //     ,"/img/th8.png"
      //   ],
      specImages: [
        require('@/assets/img/th1.png'),
        require('@/assets/img/th2.png'),
        require('@/assets/img/th3.png'),
        require('@/assets/img/th4.png'),
        require('@/assets/img/th5.png'),
        require('@/assets/img/th6.png'),
        require('@/assets/img/th7.png'),
        require('@/assets/img/th8.png')
      ],
    };
  },


  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 轮播
    ndicatorToimage: function () {
      var a = document.querySelectorAll(".el-carousel__button");
      for (let i in this.specImages) {
        //添加一个img
        let img = document.createElement('img');
        img.src = this.specImages[i];
        if (i == this.specImages.length - 1) {
          a[i].className = a[i].className + ' last-carousel-img';
        }
        a[i].append(img)
      }
    },
    mounted() {
      //在完全加载后再执行函数
      this.$nextTick(() => this.indicatorToimage());
    },
    // 搜索引擎
    inp(value) {
      const url = "https://www.baidu.com/sugrec?prod=pc&wd=" + value.target.value;


      this.$jsonp(url, {
        param1: 'value1',
        // 其他查询参数
      }).then(response => {
        // 处理成功响应
        this.responseData = response;
        // console.log(this.responseData);
        // this.searchData = response.g.map(item => item.q)
        this.searchData = response.g

      }).catch(error => {
        // 处理错误
        this.error = error;

      });





      // console.log(value.target.value);
      // let script = document.createElement('script');
      // console.log(script);
      // document.body.appendChild(script);

    },
    hhhh(src) {
      console.log(src);
    }
  },


};



// 跨域测试
// window.onload = function () {
//   document.getElementById("keywords").onkeyup = function () {
//     var a = this.value;
//     console.log(a);
//     var xmlHttpRequest = new XMLHttpRequest();
//     xmlHttpRequest.onreadystatechange = function () {
//       console.log("1");
//       if (xmlHttpRequest.readyState == 4) {
//         if (xmlHttpRequest >= 200 && xmlHttpRequest < 300) {
//           var json = JSON.parse(xmlHttpRequest.responseText);
//           var html = "";
//           for (var i = 0; i < json.length; i++) {
//             html +=
//               "<p onclick='setInput(\"" +
//               json[i].content +
//               "\")'>" +
//               json[i].content +
//               "</p>";
//           }
//           document.getElementById("datadiv").innerHTML = html;
//         }
//       }
//     };
//     xmlHttpRequest.open(
//       "GET",
//       "http://www.baidu.com/sugrec?_=" +
//         new Date().getTime() +
//         "&keywords=" +
//         this.value,
//       true
//     );
//     xmlHttpRequest.send();
//   };
// };





</script>


<style scoped>
/* icon图标设置 */
.icon ul {
  list-style: none;
}

.icon ul li {
  float: left;
  font-size: 26px;
  padding-left: 28px;
  color: #fff;
}

/* 搜索框设置 */


.userInput {
  width: 300px;
  height: 38px;
  font-size: 20px;
  padding-left: 5px;

}

.search {
  position: relative;
}

.showDataDiv {
  width: 309px;
  border: 1px solid lightgray;
  background-color: antiquewhite;
  z-index: 99;
  position: absolute;
  /* display: none; */
}

.showDataDiv p {
  padding-left: 5px;
  margin-top: 2px;
  margin-bottom: 2px;
}

.showDataDiv p:hover {
  cursor: pointer;
  border: 1px blue solid;
  background-color: aliceblue;
}

/* hearder设置 */
.header {
  margin-bottom: 40px;
}

/* 卡片播放器配置 */
/deep/ .el-carousel__indicator--horizontal {
  display: inline-block;
  padding: 10px 4px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

/*button{*/
/*  width: 100px !important;*/
/*  height: 100px !important;*/
/*}*/
/*设置略缩图片样式*/
/deep/ .el-carousel__indicators {
  display: flex !important;
  flex-wrap: nowrap !important;
}

/deep/ .el-carousel__button {
  width: 100%;
  height: 99px;
  background: none;
  padding-right: 10px;
}

/deep/ .el-carousel__indicator {
  padding-left: 0;
  padding-right: 0;
  flex: 1;
}

/deep/ .el-carousel__button img {
  width: 100%;
  height: 100%;
}

/deep/ .last-carousel-img {
  float: right;
  padding: 0;
}
</style>